<template>
	<div id="order">		
			<el-table :data="paydata.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
				<el-table-column label="订单号" prop="orderNo"></el-table-column>
				<el-table-column label="支付金额" prop="payment"></el-table-column>
				<el-table-column label="支付方式" prop="paymentTypeDesc"></el-table-column>
				<el-table-column label="支付状态" prop="statusDesc"></el-table-column>
				<el-table-column label="订单详情"  type="expand" prop="orderItemVoList">
				<template slot-scope="scope">
				<el-form label-position="left" inline class="demo-table-expand">
				<el-form-item label="订单详情">
				<p v-for="item in scope.row.orderItemVoList" :key="item.productId">{{item.productName+"    "+item.quantity+"克     "+item.totalPrice+"元"}}</p>
				</el-form-item>
				</el-form>
				</template>
				</el-table-column>
				</el-table>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[7, 14, 20, 30, 40]" :page-size="pagesize" :total="paydata.length" layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
		
	</div>
</template>

<script>
	export default {
		name: 'order',
		mounted() {
			var that = this;
			this.axios({
				method: "get",
				url: "http://47.115.152.5:8080/manage/order/list.do", //查看所有接口
				withCredentials: true, //跨域请求 在跨域请求时，会携带用户凭证
			}).then(function(res) {
				that.paydata = res.data.data.list;
				console.log(res.data.data.list);
			});
		},
		data() {
			return {
				currentPage: 1,
				pagesize: 10,
				paydata: [],
			}
		},
		methods: {
		handleSizeChange(val) {
		this.pagesize = val;
		},
		handleCurrentChange(currentPage) {
		this.currentPage = currentPage;
		}
		}
	}
</script>

<style>
</style>
